@import  "../../../styles/common.less";
.teaher-content{
  background: #fff;
  width:100%;
  overflow: hidden; 
  .teacher-ways-kids{
    padding:120px 0 0 20px;
    max-width:1200px;
    margin:0 auto;
    border-bottom: 1px solid #D0D0D0;
    overflow: hidden;
    .kids-left{
      padding: 0;
      min-width: 300px;
      margin-right:40px;
      text-align: center;
      img{
        width: 300px;
      }
    }
    .kids-center{
      max-width: 385px;
      padding:0;
      .kids-title{
        background: #FF7878;
        border-radius: 10px;
        color: #FFFFFF;
        font-family: @font-Semibold; 
        text-align: center;
        height:110px;
        max-width:265px;       
        .kids-h3{
          line-height: 56px;
          font-size: 48px;
          padding:10px 0 5px;
        }
        p{
          font-size: 18px;
          line-height: 24px;
        }
      }
      .kids-eng{
        max-width: 265px;        
        font-family: @font-Semibold;
        font-size: 40px;
        color: #FF7878;
        line-height: 52px;
        margin-top:30px;
        text-align: center;
      }
    }
    .kids-right{
      max-width: 394px;
      padding:22px 0;
      .title-ways{
        font-family: @font-Medium;
        font-size: 28px;
        span{
          margin-left: 30px;
          vertical-align: middle;
          display: inline-block;
          height:1px;
          width:230px;
          background: #D0D0D0;
        }
      }
      p{
        text-align: left;
        font-family: @font-Regular;
        font-size: 28px;
        color: #4A4A4A;
        padding:30px 0 38px 0;
        margin: 0;
      }
      .teacher-book{
        font-family: @font-Regular;
        font-size: 28px;
        color: #4A4A4A;
        img{
          width: 28px;
          height: 33px;
          margin-right: 15px;
          vertical-align: middle;
        }
      }
     
    }
  }
  .teacher-ways-imgs{
    position: relative;
    padding-top:39px;
    .teacher-ways-ul{
      
      padding-left:0;
      margin-left: 9%;
      padding-bottom:95px;
      overflow-y:hidden;
      overflow-x:auto;
      white-space: nowrap;
      height:380px;
      li{
        margin-top:10px;
        background: #000;
        &:hover{
          margin-top:0;
          width:320px;
          height:240px;
          background: none;
          .teacher-cover{
            width:320px;
            height:240px;
            opacity: 1;
            img{
              width:100%;
              height: 100%;
             
            }
          }
        }
        .teacher-cover{
          width: 287px;
          height:215px;
          opacity: 0.6;
          img{
              width: 100%;
              height: 100%;
            }
          }
        display: inline-table;
        vertical-align: top;
        list-style-type: none;
        width: 287px;
        height:215px;
        margin-right:30px;
      }
    }
    .text-teacher{
      position:absolute;
      left:47%;
      bottom: 38px;
      width: 100%;
      span{
        display: inline-block;
        width: 50px;
        height:36px;
        background: #FF7878;
        border-radius: 4px;
        font-family: DINCondensed-Bold;
        font-size: 24px;
        text-align: center;
        line-height: 42px;
        color: #FFFFFF;
        margin-right:15px;
      }
    }
  }
}
.teacher-model{
  text-align: center;
  padding-bottom:150px;
  h3{
    font-family: @font-Semibold;
    font-size: 48px;
    color: #4A4A4A;
    line-height: 75px;
  }
    p{
      font-size: 48px;
      color: #4A4A4A;
      line-height: 75px;
    }
  .teacher-model-dl{
    width:1160px;
    margin:0 auto;
    padding-top:100px;
    height:385px;
     .teacher-model-left{
       margin-right:65px;
       text-align: left;
       div{
        height:144px;
        position: relative;
        font-family: @font-Medium;
        font-size: 32px;
        color: #000000;
        line-height: 144px;
        padding-left:50px;
        z-index:99;
        i{
          display: inline-block;
          margin: 0 15px 0 30px;
          width:35px;
          height:35px;
          img{
            width:100%;
            height:100%;
        }
      }
         span{
          font-family: @font-Regular;
          font-size: 28px;
          color: #7185FD;
         }
         .bigNum{
          font-family: @font-Semibold;
          font-size: 144px;
          color: #DBE0FF;
          line-height: 144px;
          position: absolute;
          top:-35px;
          left:0;
          z-index:-1;
         }
       }
      p{
        font-family: @font-Regular;
        font-size: 28px;
        color: #4A4A4A;
        text-align: left;
        line-height:40px;
      }
     }
     .teacher-model-right{
       width:380px;
       height:285px;
       img{
         width:100%;
         height: 100%;
       }
     }
  }
}
.modal-teacher{
  position: fixed;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  top:0;
  left:0;
}
.teacher-ways-ul::-webkit-scrollbar {
  width: 50%; 
  height: 12px;
  overflow: hidden;
  border-radius: 5px;
}
.teacher-ways-ul::-webkit-scrollbar-thumb {
  border-radius: 5px;
  width:3px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
.teacher-ways-ul::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.1);
  border-radius: 5px;
}

.btn-close-x{
  position: absolute;
  top:-15%;
  right: -4%;
  z-index:999;
}
.big-close-btn{
    width: 800px;
    height:600px;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    margin:0 auto;
}